<template>
  <section id="case-studies-section" class="section">
    <div class="container">
      <div class="section-title">
        <h2>典型案例</h2>
        <p>探索AI技术在金融监管与服务中的创新应用</p>
      </div>
      <div class="cards">
        <!-- 数据分析卡片 -->
        <div class="card" @mouseenter="hoverCard" @mouseleave="resetCard" @click="goToCaseDetail('data-analysis')">
          <div class="card-header">
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="#ea580c" aria-hidden="true">
                <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
                <path d="M12 4c-4.411 0-8 3.589-8 8 0 1.657.513 3.213 1.382 4.5L16.5 7.382C15.213 6.513 13.657 6 12 6c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6c0-1.657-.513-3.213-1.382-4.5L7.5 16.618C8.787 17.487 10.343 18 12 18c4.411 0 8-3.589 8-8s-3.589-8-8-8z"/>
                <path d="M12 8c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/>
              </svg>
            </div>
            <h3>数据分析</h3>
          </div>
          <div class="card-image">
            <img src="/img/case-data-analysis-main.svg" alt="数据分析" class="case-image">
          </div>
          <div class="card-body">
            <p>探索大模型技术在金融监管数据智能分析中的创新应用，提升监管效率与决策质量。</p>
          </div>
          <div class="card-footer">
            <span class="tag">监管科技</span>
            <button class="btn btn-primary">
              <i class="fas fa-arrow-right"></i> 查看详情
            </button>
          </div>
        </div>
        
        <!-- 风险防范卡片 -->
        <div class="card" @mouseenter="hoverCard" @mouseleave="resetCard" @click="goToCaseDetail('risk-prevention')">
          <div class="card-header">
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="#dc2626" aria-hidden="true">
                <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
              </svg>
            </div>
            <h3>风险防范</h3>
          </div>
          <div class="card-image">
            <img src="/img/case-risk-prevention-1.svg" alt="风险防范" class="case-image">
          </div>
          <div class="card-body">
            <p>AI赋能系统性金融风险监测预警，构建跨市场、跨机构的智能风险防控体系。</p>
          </div>
          <div class="card-footer">
            <span class="tag">风险监管</span>
            <button class="btn btn-primary">
              <i class="fas fa-arrow-right"></i> 查看详情
            </button>
          </div>
        </div>
        
        <!-- 趋势预测卡片 -->
        <div class="card" @mouseenter="hoverCard" @mouseleave="resetCard" @click="goToCaseDetail('trend-prediction')">
          <div class="card-header">
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="#059669" aria-hidden="true">
                <path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99l1.5 1.5z"/>
              </svg>
            </div>
            <h3>趋势预测</h3>
          </div>
          <div class="card-image">
            <img src="/img/case-trend-prediction-1.svg" alt="趋势预测" class="case-image">
          </div>
          <div class="card-body">
            <p>基于大模型的金融政策效果预测与市场趋势智能分析，提升监管前瞻性决策能力。</p>
          </div>
          <div class="card-footer">
            <span class="tag">前瞻决策</span>
            <button class="btn btn-primary">
              <i class="fas fa-arrow-right"></i> 查看详情
            </button>
          </div>
        </div>
        
        <!-- 知识问答卡片 -->
        <div class="card" @mouseenter="hoverCard" @mouseleave="resetCard" @click="goToCaseDetail('knowledge-qa')">
          <div class="card-header">
            <div class="card-icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="#7c3aed" aria-hidden="true">
                <path d="M9 2v7.5h6V2H9zm-3.31 14.9l1.41-1.41L9 14.17l4.88-4.88 1.41 1.41L9 17.01l-3.31-1.11zm7.62 2.08c-2.33 0-4.41.8-6.05 2.1L4 22l1.5-4.5C6.78 16.4 8.89 16 11.11 16c2.22 0 4.34.4 6.18 1.25L20 22l-1.5-4.5c-1.65-1.3-3.73-2.11-6.19-2.11z"/>
              </svg>
            </div>
            <h3>知识问答</h3>
          </div>
          <div class="card-image">
            <img src="/img/case-knowledge-qa-1.svg" alt="知识问答" class="case-image">
          </div>
          <div class="card-body">
            <p>基于大模型的金融监管知识智能问答与政策解读系统，赋能监管工作智能化升级。</p>
          </div>
          <div class="card-footer">
            <span class="tag">智能服务</span>
            <button class="btn btn-primary">
              <i class="fas fa-arrow-right"></i> 查看详情
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'CaseStudies',
  data() {
    return {
      caseStudies: [
        {          id: 'data-analysis',          title: '数据分析',          description: '探索大模型技术在金融监管数据智能分析中的创新应用，提升监管效率与决策质量。',          icon: 'fas fa-chart-pie',          tag: '监管科技',          detail: {              overview: '本研究方向聚焦AI技术在金融监管数据分析领域的创新应用，通过大模型深度融合监管大数据，实现对金融市场运行、机构行为和风险状况的智能化监测与分析。研究成果已应用于金融监管决策支持、市场异常监测等关键场景，显著提升了监管效能和精准度。',              architecture: '系统构建了"数据中台+智能分析引擎+应用服务层"的三层架构。数据层整合监管核心数据、市场交易数据和外部宏观数据，通过联邦学习技术确保数据安全；分析层部署金融领域专用大模型，具备监管语义理解、跨模态分析和异常检测能力；应用层提供面向监管人员的智能分析工具和决策支持服务。',              architectureImage: '/img/architecture-data-analysis.svg',              services: [                '金融监管数据智能治理与标准化',                '跨市场交易行为异常识别分析',                '金融机构风险画像动态评估',                '监管政策效果智能量化分析',                'AI驱动的监管报表自动生成'              ],              advantages: [                '采用隐私计算技术，保障监管数据安全合规',                '分析效率提升85%，支持毫秒级异常检测',                '大模型深度理解监管规则，分析精准度达93%',                '支持多维度数据关联分析，发现隐蔽风险',                '为监管决策提供可解释的智能分析依据'              ],            images: [              '/img/case-data-analysis-main.svg',              '/img/case-data-analysis-main.svg'            ]          }        },
        {          id: 'risk-prevention',          title: '风险防范',          description: 'AI赋能系统性金融风险监测预警，构建跨市场、跨机构的智能风险防控体系。',          icon: 'fas fa-shield-alt',          tag: '风险监管',          detail: {              overview: '本项目探索AI技术在金融风险监管领域的创新应用，构建了覆盖系统性金融风险全链条的智能监测预警体系。通过深度学习和知识图谱技术，实现风险的早期识别、精准预警和有效处置，为防范化解金融风险提供了强有力的技术支撑。',              architecture: '系统采用分布式多层架构设计，融合了大模型、知识图谱和图神经网络等前沿AI技术。数据层整合银行、证券、保险等多领域监管数据；模型层构建风险传导模型和压力测试系统，通过图神经网络识别机构关联性风险；应用层提供风险监测仪表盘、预警信号管理和处置决策支持工具。',              architectureImage: '/img/architecture-risk-prevention.svg',              services: [                '系统性金融风险实时监测预警',                '跨市场风险传导网络分析',                '金融机构关联性风险评估',                '风险事件智能处置决策支持',                '金融稳定形势综合研判'              ],              advantages: [                '风险预警提前量增加60天，准确率达95%',                '支持多情景风险模拟和压力测试',                '基于知识图谱的风险传导路径可视化',                '为宏观审慎管理提供智能化技术支撑',                '实现监管资源精准配置，提升风险处置效率'              ],            images: [              '/img/case-risk-prevention-1.svg',              '/img/case-risk-prevention-1.svg'            ]          }        },
        {          id: 'trend-prediction',          title: '趋势预测',          description: '基于大模型的金融政策效果预测与市场趋势智能分析，提升监管前瞻性决策能力。',          icon: 'fas fa-chart-line',          tag: '前瞻决策',          detail: {              overview: '本研究方向探索AI技术在金融政策研究和市场预测领域的创新应用，通过深度融合政策文本、市场数据和宏观经济指标，构建智能预测模型，为金融监管提供前瞻性决策支持。研究成果已应用于货币政策效果评估、市场流动性预测等关键场景。',              architecture: '系统采用先进的多模态融合架构，整合了自然语言处理、时序预测和因果推断等技术。数据层构建金融政策知识库、历史市场数据库和宏观经济指标库；模型层部署监管专用大模型，具备政策文本深度理解、多情景模拟和因果分析能力；应用层提供政策效果预测、市场趋势分析和情景模拟工具。',              architectureImage: '/img/architecture-trend-prediction.svg',              services: [                '金融政策文本智能解读与效果预测',                '市场流动性趋势多情景分析',                '利率与汇率走势智能预测',                '宏观经济指标关联分析与预警',                '金融政策影响范围量化评估'              ],              advantages: [                '政策效果预测准确率提升75%，支持中长期趋势分析',                '基于大模型的政策意图深度理解',                '支持监管政策多情景模拟与优化',                '提供可解释的预测结果与依据',                '为金融监管前瞻性决策提供科学支撑'              ],            images: [              '/img/case-trend-prediction-1.svg',              '/img/case-trend-prediction-1.svg'            ]          }        },
        {          id: 'knowledge-qa',          title: '知识问答',          description: '基于大模型的金融监管知识智能问答与政策解读系统，赋能监管工作智能化升级。',          icon: 'fas fa-robot',          tag: '智能服务',          detail: {              overview: '本项目探索大模型技术在金融监管知识服务领域的创新应用，构建了覆盖政策法规、监管案例和专业知识的智能知识服务系统。通过知识增强的大模型技术，实现对复杂金融监管问题的精准解答和政策的深度解读，为监管人员提供智能化知识支撑。',              architecture: '系统采用"知识图谱+大模型"的混合增强架构，严格遵循金融监管信息安全管理规范。知识层构建包含金融政策法规、监管案例、研究成果的领域知识图谱；模型层通过知识注入技术增强大模型的金融专业能力；应用层提供智能问答、政策解读、知识检索等功能模块。',              architectureImage: '/img/architecture-knowledge-qa.svg',              services: [                '金融政策法规智能查询与深度解读',                '监管合规要求自动分析与提示',                '金融创新业务合规性智能评估',                '政策文件变更自动对比与分析',                '监管知识个性化推送与学习'              ],              advantages: [                '金融专业问答准确率达96%，响应速度提升80%',                '政策解读深度融合监管意图与实践要求',                '支持复杂监管问题的多步骤推理与解答',                '符合金融监管信息安全与保密要求',                '显著提升监管工作效率与决策质量'              ],            images: [              '/img/case-knowledge-qa-1.svg',              '/img/case-knowledge-qa-1.svg'            ]
          }
        }
      ]
    }
  },
  methods: {
    hoverCard(event) {
      var card = event.currentTarget;
      card.style.webkitTransform = 'translateY(-8px)';
      card.style.transform = 'translateY(-8px)';
    },
    resetCard(event) {
      var card = event.currentTarget;
      card.style.webkitTransform = 'translateY(0)';
      card.style.transform = 'translateY(0)';
    },
    goToCaseDetail(caseId) {
      // 导航到案例详情页
      this.$router.push(`/case-detail/${caseId}`);
    }
  }
}
</script>

<style scoped>
/* CSS 变量回退 */
.section {
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --secondary: #0f172a;
  --accent: #60a5fa;
  --bg-section: #f8fafc;
  --bg-card: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --border-light: #e2e8f0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 20px rgba(30, 64, 175, 0.12);
  --shadow-lg: 0 10px 30px rgba(30, 64, 175, 0.15);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.section {
  padding: 60px 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  background: #f8fafc; /* CSS 变量回退 */
}

.section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: -webkit-radial-gradient(circle, rgba(30, 64, 175, 0.05) 0%, rgba(30, 64, 175, 0) 70%);
  background: radial-gradient(circle, rgba(30, 64, 175, 0.05) 0%, rgba(30, 64, 175, 0) 70%);
  bottom: -200px;
  left: -100px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 15px;
  line-height: 1.2;
}

.section-title p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* 卡片容器 - 优先使用flex布局确保广泛兼容性 */
.cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -10px;
  margin-top: 30px;
}

/* 卡片样式 */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 30px;
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-light);
  /* 为flex布局提供间距 */
  margin: 10px;
  /* 为flex布局计算宽度 */
  width: calc(25% - 20px);
}

.card:hover {
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, right top, from(#bfdbfe), to(#93c5fd));
  background: linear-gradient(to right, #bfdbfe, #93c5fd);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 2rem;
  box-shadow: 0 6px 12px rgba(147, 197, 253, 0.3);
  transition: all 0.3s ease;
}

.card-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 16px rgba(30, 64, 175, 0.4);
}

.card-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.card-image {
  margin: 15px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
}

.case-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-body p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}

.card-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: auto;
}

.tag {
  background-color: rgba(30, 64, 175, 0.1);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: -webkit-gradient(linear, left top, right top, from(var(--primary-light)), to(var(--primary)));
  background: linear-gradient(to right, var(--primary-light), var(--primary));
  color: white;
}

.btn-primary:hover {
  opacity: 0.9;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

/* 响应式设计 - 确保在所有浏览器中都有良好的兼容性 */
@media (max-width: 1200px) {
  .card {
    width: calc(33.333% - 20px);
  }
}

@media (max-width: 768px) {
  .card {
    width: calc(50% - 20px);
    padding: 20px;
  }
  
  .section-title h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 576px) {
  .card {
    width: calc(100% - 20px);
  }
}
</style>